<template>
  <div class="app-container calendar-list-container">
    <el-table
      :key="tableKey"
      :data="list"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公司名称">
        <template slot-scope="scope">
          <span>{{scope.row.companyName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="初期帐户金额">
        <template slot-scope="scope">
          <span>{{scope.row.capital}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-if="account_upd" size="small" type="success" @click="handleUpdate(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="20%">
        <el-form-item label="初期账户金额" prop="capital">
          <el-col :span="8">
            <el-input v-model="form.capital" class="form-input" placeholder="初期账户金额"></el-input>
          </el-col>
          <el-col :span="1">
            <span class="form-unit">元</span>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="update('form')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, getObj, putObj } from "@/api/init/account"
import { mapGetters } from "vuex"
export default {
  name: 'AccountIndex',
  data () {
    return {
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      tableKey: 0,
      accountUpd: false,
      dialogFormVisible: false,
      dialogStatus: '',
      form: {
        id: undefined,
        capital: undefined,
        companyId: undefined,
        companyName: undefined
      },
      textMap: {
        update: "编辑",
        create: "创建"
      },
      rules: {
        capital: [
          {
            required: true,
            message: "请输入初期账户金额",
            trigger: "blur"
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  created () {
    this.getList()
    this.account_upd = this.permissions["account_upd"];
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.isAsc = false
      this.listQuery['companyId'] = this.$store.state.user.userInfo.deptId
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleUpdate (row) {
      getObj(row.id).then(response => {
        this.form = response.data
        this.dialogFormVisible = true
        this.dialogStatus = "update"
      })
    },
    cancel (formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    update (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          putObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .dialog-footer {
    text-align: center
  }
  .form-unit {
    position: absolute
  }
</style>
